<template>
    <div class="content">
      <el-row class="info">
        <div class="title"><a>{{ item.title }}</a></div>
        <div class="time"><a>{{ remainingTime }}</a></div>
      </el-row>
    </div>
</template>
  
  <style scoped>
  .content {
    width: 95%;
    height: 100px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 5px;
  }
  
  .info {
    display: flex;
    justify-content: space-between;
  }
  
  .title {
    flex: 1;
    margin-right: 10px;
    font-weight: bold;
  }
  
  .time {
    flex: 1;
    text-align: right;
    color: orange;
  }
  </style>

<script setup>
import { defineProps,ref,computed } from 'vue';

const props = defineProps({
    item:{
        type: Object,
        required: true
    }
})
const currentTime = ref(new Date());

const remainingTime = computed(() => {
  const deadline = new Date(props.item.deadline);
  const difference = deadline.getTime() - currentTime.value.getTime();

  if (difference <= 0) {
    return '已截止';
  }
  // 计算剩余时间
  const days = Math.floor(difference / (1000 * 60 * 60 * 24));
  const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));

  return `${days}天 ${hours}小时 ${minutes}分钟`;
});


</script>
